<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="300"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // --- Helper function to draw an arrow ---
    function drawArrow(x1, y1, x2, y2, arrowHeadSize = 10) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        
        const angle = Math.atan2(y2 - y1, x2 - x1);
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - arrowHeadSize * Math.cos(angle - Math.PI / 6), y2 - arrowHeadSize * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - arrowHeadSize * Math.cos(angle + Math.PI / 6), y2 - arrowHeadSize * Math.sin(angle + Math.PI / 6));
        
        ctx.stroke();
    }

    // --- Helper function to draw hatched surfaces ---
    function drawHatchedSurface(x1, y1, x2, y2, isVertical) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
        
        const hatchLength = 10;
        const hatchSpacing = 20;

        if (isVertical) { // Vertical Wall
            for (let y = y1 + hatchSpacing / 2; y < y2; y += hatchSpacing) {
                ctx.beginPath();
                ctx.moveTo(x1, y);
                ctx.lineTo(x1 - hatchLength, y - hatchLength);
                ctx.stroke();
            }
        } else { // Horizontal Ground
            for (let x = x1 + hatchSpacing / 2; x < x2; x += hatchSpacing) {
                ctx.beginPath();
                ctx.moveTo(x, y1);
                ctx.lineTo(x - hatchLength, y1 + hatchLength);
                ctx.stroke();
            }
        }
    }

    // --- Geometric parameters ---
    const y_ground = 250;
    const x_wall = 40;

    // Block B
    const h_B = 60;
    const w_B = 250;
    const y_B_top = y_ground - h_B;
    const x_B_left = 150;

    // Block A
    const h_A = 40;
    const w_A = 80;
    const y_A_top = y_B_top - h_A;
    const x_A_left = x_B_left + w_B - w_A - 20;

    // Pulley
    const y_attach_A = y_A_top + h_A / 2;
    const y_attach_B = y_B_top + h_B / 2;
    const r_pulley = (y_attach_B - y_attach_A) / 2;
    const y_pulley_center = y_attach_A + r_pulley;
    const x_pulley_center = x_wall + 30;

    // --- Draw components ---

    // Ground
    drawHatchedSurface(0, y_ground, canvas.width, y_ground, false);

    // Wall
    drawHatchedSurface(x_wall, 50, x_wall, y_ground, true);

    // Block B
    ctx.beginPath();
    ctx.rect(x_B_left, y_B_top, w_B, h_B);
    ctx.stroke();

    // Block A
    ctx.beginPath();
    ctx.rect(x_A_left, y_A_top, w_A, h_A);
    ctx.stroke();

    // Pulley Support and Wheel
    ctx.beginPath();
    ctx.moveTo(x_wall, y_pulley_center);
    ctx.lineTo(x_pulley_center, y_pulley_center);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(x_pulley_center, y_pulley_center, r_pulley, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(x_pulley_center, y_pulley_center, 4, 0, 2 * Math.PI);
    ctx.fill();

    // Rope
    ctx.beginPath();
    ctx.moveTo(x_A_left, y_attach_A);
    ctx.lineTo(x_pulley_center, y_attach_A);
    ctx.arc(x_pulley_center, y_pulley_center, r_pulley, -Math.PI / 2, Math.PI / 2, false);
    ctx.lineTo(x_B_left, y_attach_B);
    ctx.stroke();
    
    // Force F
    const x_F_start = x_B_left + w_B;
    const y_F = y_B_top + h_B / 2;
    const x_F_end = x_F_start + 80;
    drawArrow(x_F_start, y_F, x_F_end, y_F);

    // Labels
    ctx.font = 'italic 24px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('A', x_A_left + w_A / 2, y_A_top + h_A / 2);
    ctx.fillText('B', x_B_left + 100, y_B_top + h_B / 2);
    ctx.fillText('F', x_F_end + 15, y_F);

</script>
</body>
</html>